<script lang="ts">
import Vue from 'vue'
import tips from "@/utils/tips";
import {getPrice, myReplace} from "@/utils/utils";
import NavBar from "@/components/nav-bar/nav-bar.vue";
import {storeWithdrawals} from "@/services/store/withdrawals";
import {agentWithdrawals} from "@/services/Agents/withdrawals";
import RInput from "@/components/RInput/RInput.vue";

export default Vue.extend({
  name: "IncomePayouts",
  components: {RInput, NavBar},
  data() {
    return {
      type: '',
      money: 0,
      selectedMoney: null
    }
  },
  computed: {
    lang() {
      return this.$t('incomePayouts')
    },
  },
  onLoad(query?: AnyObject) {
    console.log(query)
    const {type, money} = query
    console.log(type, money)
    this.type = type
    this.money = parseFloat(money).toFixed(2)
  },
  methods: {
    myReplace,
    getPrice,
    // 选择提现金额
    onAllPayouts() {
      this.selectedMoney = this.money
    },
    // 提现
    async onPayouts() {
      let {selectedMoney, money, type} = this
      selectedMoney = parseFloat(selectedMoney)
      if (selectedMoney > money) {
        tips.toast(myReplace(this.lang.messages['amountExceeded'], '{money}', money))
        return
      } else if (selectedMoney >= 450) {
        tips.toast(this.lang.messages['amountTooHigh'])
        return
      } else if (selectedMoney < 10) {
        tips.toast(this.lang.messages['amountTooLow'])
        return
      }
      let res: any;
      if (type === 'agent') {
        res = await agentWithdrawals(selectedMoney)
      } else {
        res = await storeWithdrawals(selectedMoney)
      }
      uni.navigateBack({delta: 2})
      setTimeout(() => {
        console.log(res.msg)
        tips.toast(res.msg, 3000)
      }, 500)
    }
  }
})
</script>

<template>
  <view>
    <nav-bar :page-title="lang.pageName"/>
    <view :class="[locale]">
      <view class="center" style="height: 200rpx;">
        <view class="text-bold color-blue" :style="{fontSize:locale==='zh-CN'?'50rpx':'40rpx'}">{{ lang.title }}</view>
      </view>

      <view class="padding-30" style="background: white;height: 77vh;border-radius: 20rpx 20rpx 0 0">

        <view class="flex-center common-title gap-8">
          <view>{{ lang.withdrawalAmount['label'] }}</view>
          <view class="flex-center gap-8 default-text">
            {{ myReplace(lang.withdrawalAmount['availableAmount'], '{money}', money) }}
          </view>
        </view>

        <view class="gap-30">
          <view class="flex-between">

            <view class="flex-center default-text flex-1">
              <u-icon name="rmb" size="28" :bold="true" color="#000"/>
              <!-- 自定义样式 -->
              <input type="digit" style="height: 100rpx;width: 100%" v-model="selectedMoney"
                     :placeholder="lang.withdrawalAmount['placeholder']"/>
            </view>
            <view class="common-title color-blue" @click="onAllPayouts">
              {{ lang.withdrawalAmount['withdrawAll'] }}
            </view>
          </view>
          <view style="width: 100%; height: 2rpx; background: #D4D4D4"/>
        </view>

        <view class="center" style="margin:60rpx 0">
          <view class="head-title">{{ lang.withdrawalAmount['withdrawalMessage'] }}</view>
        </view>

        <!-- 提现按钮-->
        <u-button
            :disabled="!selectedMoney" shape="circle" @click="onPayouts" size="large" color="#1073FF"
            :customStyle="{fontSize: '32rpx' }">
          {{ lang.button['withdraw'] }}
        </u-button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">

</style>